<template>
  <div class="zhuce">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <img src="../assets/touxiang.png" alt="">
  
      <div class="zhong">
      <img src="../assets/叉叉.png" alt="" id="cha">
    <fieldset>    
      <form @submit.prevent="getForm()" >
        <p>
          <img src="../assets/ren.png"> <input type="text" required placeholder="请输入用户名" v-model="uname" />
        </p>
       <p>
        <img src="../assets/锁.png"><input type="password" required placeholder="请输入密码" v-model="pwd" />
       </p>
        <p>
        <img src="../assets/电话.png"><input type="number" required placeholder="请输入手机号" v-model="phone"/>  
        </p>
        <p>
        <img src="../assets/聊天框.png"><input type="number" required placeholder="输入验证码" v-model="yzm"/><button @click="btn()">验证码</button>  
        </p>
        <input type="submit" value="" id="dl">
      </form>
    </fieldset> 
    <!-- <img src="../assets/勾.png" id="gou">        -->
        </div>  

    <p id="di">——————————  注册账号  ——————————</p>
    <div class="kong"></div>
  </div>
</template>

<script>
import username from "../assets/user.js"
export default {
name:'ZhuCe',
data(){
  return{
    username,
    uname:'',
    pwd:'',
    phone:'',
    yzm:'',
    c:''
  }
},
methods:{
  btn(){
    let c='';
    let num =[0,1,2,3,4,5,6,7,8,9];
    for(let i=0;i<6;i++){
      c+=num[Math.floor(Math.random()*num.length)];
    }
    alert(c);
    return c;
  },
  getForm(){
    username.forEach(item => {
      if(this.uname==item.username&&this.pwd==item.pwd&&this.phone==item.tel){
      this.$router.push('/toupiao'); 
      }
    });
        
  }
}
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
/* 小屏幕手机端 */
@media (min-width: 0px) and (max-width:768px) {
.div1 {
width: 100px;
height: 100px;
background-color: red;
}
}
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 768px) and (max-width:992px){
.div1 {
width: 300px;
height: 300px;
background-color: blue;
}
}
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 992px) {
.div1 {
width: 500px;
height: 500px;
background-color: aqua;
}
}
.zhuce{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    background-color:#b7210f;
}
.zhuce img{
    width: 14rem;
    height: 13rem;
    margin-top: 30px;
}
.zhuce .zhong{
  width: 100%;
  height: 100%;
  margin-top: -70px;
}
#cha {
  width: 38px;
  height: 38px;
  position: relative;
  left: 227px;
  top: 60px;
}
#gou{
  width: 95px;
  height: 95px;
  z-index: 1;
  position: relative;
  bottom: 66px;

}
.zhuce fieldset{
  width: 80%;
  height: 60%;
  justify-content: space-between;
  margin: auto auto;
  border: none;
  border-radius: 5px; 
  background-color: #c1564a;
  margin-top: 30px;
  border-radius: 20px;
  margin-bottom: 0;
}
.zhuce fieldset form{
  width: 100%;
  height: 100%;
  text-align: center;
}
.zhuce fieldset form p{
  width: 80%;
  height: 40px;
  background-color: #dec7c0;
  border-radius: 20px;  
  margin: auto auto;
  margin-top: 20px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 5px;
  padding-bottom: 5px;
  display: flex;
}
.zhuce fieldset form p img{
  width: 30px;
  height: 30px;
  background-color: #dec7c0;
  margin: 0 0 ;
}
.zhuce fieldset form input{
  width: 250px;
  height: 30px;
  background-color: #dec7c0;
  border-radius: 20px;
  border: none;
  text-align: center;
  color: #cb2835;
}
.zhuce fieldset form button{
  width: 100px;
  height: 40px;
  background-color: #e7e6e8;
  border: none;
  border-radius: 20px;
  color: #dd3e24;
  font-weight: 800;
  float: right;
}
#dl{
  width: 120px;
  height: 120px;
  border-radius: 95px;
  background-image: url('../assets/勾.png');
  background-size: 120px 120px;
  z-index: 9999;
  position: relative;
  top: 55px;
}
#di{
  color: white;
  margin-top: 100px;
}
.kong{
  width: 100%;
  height: 10rem;
  border: none;
  
}
</style>